{% extends "base.html" %}

{% block content %}
<div class="row">
    <div class="col-12">
        <h2>教学资源列表</h2>
        
        <div class="card mb-4">
            <div class="card-body">
                <div class="row">
                    <div class="col-md-3">
                        <label class="form-label">资源类型</label>
                        <select class="form-select" id="filterType">
                            <option value="all">全部</option>
                            <option value="ppt">PPT课件</option>
                            <option value="lesson_plan">教案</option>
                        </select>
                    </div>
                    <div class="col-md-3">
                        <label class="form-label">年级</label>
                        <select class="form-select" id="filterGrade">
                            <option value="all">全部年级</option>
                            {% for grade in ['一年级', '二年级', '三年级', '四年级', '五年级', '六年级', '初一', '初二', '初三', '高一', '高二', '高三'] %}
                            <option value="{{ grade }}">{{ grade }}</option>
                            {% endfor %}
                        </select>
                    </div>
                    <div class="col-md-3">
                        <label class="form-label">学期</label>
                        <select class="form-select" id="filterSemester">
                            <option value="all">全部学期</option>
                            <option value="上">上学期</option>
                            <option value="下">下学期</option>
                        </select>
                    </div>
                    <div class="col-md-3">
                        <label class="form-label">&nbsp;</label>
                        <button class="btn btn-primary w-100" onclick="loadResources()">筛选</button>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="card">
            <div class="card-body">
                <div id="resourcesList" class="row">
                    <!-- 资源列表将在这里动态加载 -->
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
let currentPage = 1;
const itemsPerPage = 12;

function loadResources() {
    const type = document.getElementById('filterType').value;
    const grade = document.getElementById('filterGrade').value;
    const semester = document.getElementById('filterSemester').value;
    
    const params = new URLSearchParams({
        type: type,
        grade: grade,
        semester: semester
    });
    
    axios.get('/api/resources?' + params)
        .then(response => {
            displayResources(response.data);
        })
        .catch(error => {
            console.error('加载资源失败:', error);
        });
}

function displayResources(resources) {
    const container = document.getElementById('resourcesList');
    
    if (resources.length === 0) {
        container.innerHTML = '<div class="col-12 text-center"><p>暂无资源</p></div>';
        return;
    }
    
    container.innerHTML = '';
    
    resources.forEach(resource => {
        const card = document.createElement('div');
        card.className = 'col-md-4 col-sm-6 mb-3';
        
        const icon = resource.file_type === 'ppt' ? 'fa-file-powerpoint' : 'fa-book';
        const color = resource.file_type === 'ppt' ? 'text-primary' : 'text-success';
        
        card.innerHTML = `
            <div class="card h-100">
                <div class="card-body">
                    <div class="text-center mb-2">
                        <i class="fas ${icon} fa-2x ${color}"></i>
                    </div>
                    <h6 class="card-title text-truncate" title="${resource.original_name}">${resource.original_name}</h6>
                    <p class="card-text">
                        <small class="text-muted">
                            ${resource.grade} ${resource.semester}学期<br>
                            上传者: ${resource.uploader}<br>
                            ${new Date(resource.upload_time).toLocaleDateString()}
                        </small>
                    </p>
                    <div class="d-flex gap-2">
                        <a href="/download/${resource.file_type}/${resource.filename}" class="btn btn-sm btn-primary">下载</a>
                        <button class="btn btn-sm btn-danger" onclick="deleteResource(${resource.id})">删除</button>
                    </div>
                </div>
            </div>
        `;
        
        container.appendChild(card);
    });
}

function deleteResource(id) {
    if (confirm('确定要删除这个资源吗？')) {
        axios.delete(`/api/delete_resource/${id}`)
            .then(response => {
                if (response.data.success) {
                    loadResources();
                }
            })
            .catch(error => {
                alert('删除失败：' + error.message);
            });
    }
}

// 页面加载时加载资源
document.addEventListener('DOMContentLoaded', function() {
    // 从URL参数中读取筛选条件
    const urlParams = new URLSearchParams(window.location.search);
    if (urlParams.get('type')) {
        document.getElementById('filterType').value = urlParams.get('type');
    }
    if (urlParams.get('grade')) {
        document.getElementById('filterGrade').value = urlParams.get('grade');
    }
    if (urlParams.get('semester')) {
        document.getElementById('filterSemester').value = urlParams.get('semester');
    }
    
    loadResources();
});
</script>
{% endblock %}
